<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/weixin/mui.min.js"></script>
		<script src="js/weixin/vue.js"></script>
		<link rel="stylesheet" href="css/weixin/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/weixin/style.css">
		<style type="text/css">
			#tell_box {
				display: none;
				position: absolute;
				bottom: 0px;
				z-index: 99999999;
				width: 100%;
				background: #d8d8d8;
			}
			
			#tell_box h4 {
				margin-bottom: 10px;
				background: white;
				text-align: center;
				line-height: 40px;
				margin-top: 0px;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<div id="zhao">
				<header class="mui-bar mui-bar-nav putong" v-show="sellerType===0">
					<h1 class="mui-title">商家详情</h1>
					<a  class="mui-icon mui-icon-arrowleft mui-action-back" style="color:#fff;"></a>
					
					<!--<a v-if="shouye === 0" class="mui-icon mui-icon-arrowleft mui-action-back" style="color:#fff;"></a>
					<a v-else onclick="history.go(-1);" class="mui-icon mui-icon-arrowleft" style="color:#fff;"></a>-->
				</header>

				<header class="mui-bar mui-bar-nav vipyonghu" v-show="sellerType===1">
					<h1 class="mui-title">商家详情</h1>
					<a class="mui-icon mui-icon-arrowleft mui-action-back" style="color:#fff;"></a>
					
					<!--<a v-if="shouye === 0" class=" mui-icon mui-icon-arrowleft mui-action-back" style="color:#fff;"></a>
					<a v-else onclick="history.go(-1);" class="mui-icon mui-icon-arrowleft" style="color:#fff;"></a>-->
				</header>
				<!--头部end-->
				<div style="margin-top:50px;">


					<div id="slider" class="mui-slider" v-if="srcArr.length > 0">
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img :src="PICURL+firstImg">
								</a>
							</div>
							<!-- 第一张 -->
							<div class="mui-slider-item" v-for="val in srcArr" :key="val.id">
								<a href="#">
									<img :src="PICURL+val.picPath" onerror="imgbug()">
								</a>
							</div>

							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img :src="PICURL+lastImg">
								</a>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator" v-for="val of srcArr" :key="val.id"></div>
						</div>
					</div>
					
					<!--<img v-if="sellerPicpath" :src="sellerPicpath" onerror="imgError(this);" height="180" width="100%">-->
					<div class="" v-else style="widows: 100%;height: 180px;text-align: center;font-size: 10px;line-height: 180px;">
						该商家暂无图片
					</div>
					<span class="page_view">访问量({{sellerClick}})</span>
				</div>
				<!--轮播图end-->
				<div class="fudong">
					<div class="xiangqing">
						<div class="gsxx">
							<div v-if="num2 !== null||num !== null">
								<a href="javascript:;" @click="tel(num,num2)"><img src="images/weixin/tel.png" width="60" height="60"></a>
							</div>
							<div v-else>
								<a class="null">此商户未留电话</a>
							</div>

							<h1 class="w70 dian h1" v-show="sellerType===0">{{sellerName}}</h1>
							<h1 class="w70 dian h1 " v-show="sellerType===1"><img src="images/weixin/vip.png" alt="" width="25"/><span class="vip">{{sellerName}}</span></h1>
							<!-- <p class="w70 dian">{{sellerAddr}}</p> -->
						</div>
					</div>
					<div class="nav">
						<ul class="">
							<li class="active02">商家详情</li>
							<!-- <li class="">产品展示</li>-->
						</ul>
					</div>
				</div>
				<!--基本资料end-->
				<div class="xxzl">
					<h2>商家地址</h2>
					<!--<p>{{marketAddr}}&nbsp;&nbsp;&nbsp;{{marketName}}</p>-->
					<p>{{sellerAddr}}</p>
					<hr style="border:none; border-top:1px solid #dbdbdb; " />
					<h2>主营</h2>
					<p>{{sellerScope}}</p>
					<hr style="border:none; border-top:1px solid #dbdbdb; " />
					<h2>企业简介</h2>
					<p>{{sellerProfile}}</p>
				</div>
				<button v-if="shouye === 0" type="button" class="mui-btn mui-btn-blue mui-btn-block pos mui-action-back">返回查询列表</button>
				<button v-else type="button" class="mui-btn mui-btn-blue mui-btn-block pos" onclick="history.go(-1)">返回</button>
			</div>
			<div id="tell_box">
				<h4>请选择要拨打的号码</h4>
				<ul class="mui-table-view">
					<li v-if="num.length === 11" class="mui-table-view-cell" @click="call(num)">
						<a class="mui-navigate-right">
							手机：{{num}}
						</a>
					</li>

					<li v-else class="mui-table-view-cell">
						<a class="mui-navigate-right">
							手机：空
						</a>
					</li>

					<li v-if="num2 === null || num2.length < 11" class="mui-table-view-cell">
						<a class="mui-navigate-right">
							电话：空
						</a>
					</li>

					<li v-else class="mui-table-view-cell" @click="call(num2)">
						<a class="mui-navigate-right">
							电话： {{num2}}
						</a>
					</li>

				</ul>
			</div>
		</div>

	</body>

</html>
<script type="text/javascript">
	mui.init()
	var mask = mui.createMask(disnone); //callback为用户点击蒙版时自动执行的回调；

	var xqid = localStorage.getItem("ID");
	xiangqing(xqid);
	var app = new Vue({
		el: '#app',
		data: {
			PICURL: 'http://www.xiaoxx.net//',
			shouye: 0,
			sellerClick: 12,
			sellerName: "商家名称",
			sellerAddr: "商家地址",
			sellerScope: "商家主营产品/商家主营产品/商家主营产品",
			sellerProfile: "商家简介商家简介商家简介商家简介商家简介商家简介商家简介商家简介商家简介商家简介商家简介",
			sellerType: Number,
			sellerPhone: "",
			sellerTel: '',
			marketAddr: '',
			marketName: '',
			num: '',
			num2: '',
			srcArr: [],
			firstImg: '',
			lastImg: ''
		},
		methods: {
			tel:function(num, num2) {
				mask.show(); //显示遮罩
				mui("#tell_box")[0].style.display = 'block';
				mui(".mui-backdrop")[0].style.zIndex = '99999998';
				app.num = num;
				app.num2 = num2;
			},
			call:function(num) {
				location.href = "tel:" + num;
				mui("#tell_box")[0].style.display = 'none';
				mask.close(); //关闭遮罩
			}
		}

	})
	function imgbug(){
		app.srcArr = [];
	}

	function xiangqing(id) {
		mui.ajax(URL + 'searchAction!findSellerById', {
			data: {
				id: id
			},
			dataType: 'json', //服务器返回json格式数据
			type: 'post', //HTTP请求类型
			timeout: 10000, //超时时间设置为10秒；
			success: function(data) {

				var getData = data.data[0].seller[0];

				//				console.log(JSON.stringify(getData))
				app.sellerClick = getData.sellerClick;
				app.sellerAddr = getData.sellerAddr;
				app.sellerName = getData.sellerName;
				app.sellerScope = getData.sellerScope;
				app.sellerProfile = getData.sellerProfile;
				app.num = getData.sellerPhone;
				app.num2 = getData.sellerTel;
				app.sellerPicpath = getData.sellerPicpath1;
				app.sellerType = getData.sellerType;
				app.marketName = getData.marketName;
				app.marketAddr = getData.marketAddr;
				app.srcArr = data.data[0].sellerPic;
				console.log(JSON.stringify(app.srcArr))
				if(app.srcArr.length > 0) {
					app.firstImg = app.srcArr[app.srcArr.length - 1].picPath;
					app.lastImg = app.srcArr[0].picPath;
				}
				if(app.srcArr.length > 1) {
					setTimeout(function() {
						var gallery = mui('.mui-slider');
						gallery.slider({
							interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
						});
					}, 200)
				}
			},
			error: function(xhr, type, errorThrown) {
				console.log(xhr)
			}
		});

	}

	function disnone() {
		mui("#tell_box")[0].style.display = 'none';
	}
</script>